<template>
	<view class="pages-service">
		<view class="space-lg"></view>
		<view class="content">
			<!-- <scroll-view scroll-x class="cate-scroll" enable-flex :scroll-into-view="`cate-${activeCateInd}`"
				scroll-with-animation> -->
			<view class="cate-wrap">
				<view class="cate-item" v-for="(item, index) in service_cate.list" :key="index" :id="`cate-${index}`"
					:class="{ active: activeCateInd === index }"
					:style="{ color: activeCateInd === index ? primaryColor : '#484848' }"
					@tap.stop="chooseCate(index)">
					{{ item.title }}
				</view>
			</view>
			<!-- </scroll-view> -->
			<view class="fill-base mt-md ml-md mr-md pd-lg radius-16" v-for="(item, index) in list.data" :key="index">
				<service-list-item :info="item"></service-list-item>
			</view>

			<load-more :noMore="list.current_page >= list.last_page && list.data.length > 0" :loading="loading"
				v-if="loading">
			</load-more>
			<abnor v-if="!loading && list.data.length <= 0 && list.current_page == 1">
			</abnor>
			<view class="space-footer"></view>
		</view>

	</view>
</template>

<script>
import {
	mapState,
	mapMutations
} from "vuex"
import serviceListItem from "@/components/service-list-item.vue"
export default {
	components: {
		serviceListItem
	},
	data() {
		return {
			options: {},
			param: {
				page: 1,
			},
			list: {
				data: []
			},
			loading: true,
			lockTap: false,
			activeCateInd: 0   // 当前选中的分类索引
		}
	},
	computed: mapState({
		primaryColor: state => state.config.configInfo.primaryColor,
		subColor: state => state.config.configInfo.subColor,
		location: state => state.user.location,
		service_cate: state => state.service.service_cate,
	}),
	onLoad(options) {
		console.log('service_cate', this.service_cate)
		let {
			title = '全部'
		} = options
		this.options = options
		this.activeCateInd = this.service_cate.list.findIndex(item => item.ind == options.id)

		console.log(this.activeCateInd, 'service_list', options)

		if (options.id) {
			this.activeCateInd = this.service_cate.list.findIndex(item => item.ind == options.id)
		} else {
			if (this.service_cate.list && this.service_cate.list.length) {
				this.activeCateInd = 0
				this.options.id = this.service_cate.list[0].ind  // 兜底默认值，可按业务调整
			}
		}

		uni.setNavigationBarTitle({
			title
		})
		this.initIndex()
	},
	onPullDownRefresh() {
		// #ifndef APP-PLUS
		uni.showNavigationBarLoading()
		// #endif
		this.initRefresh();
		uni.stopPullDownRefresh()
	},
	onReachBottom() {
		if (this.list.current_page >= this.list.last_page || this.loading) return;
		this.param.page = this.param.page + 1;
		this.loading = true;
		this.getList();
	},
	methods: {
		...mapMutations(['updateUserItem', 'updateOrderItem', 'updateTechnicianItem',
			'updateMapItem', 'updateShopstoreItem', 'updateDynamicItem'
		]),
		async initIndex(refresh = false) {
			// #ifdef H5
			if (!refresh && this.$jweixin.isWechat()) {
				await this.$jweixin.initJssdk();
				this.$jweixin.wxReady(() => {
					this.$jweixin.hideOptionMenu()
				})
			}
			// #endif
			await this.getList()
			this.$util.setNavigationBarColor({
				bg: this.primaryColor
			})
			this.$nextTick(() => {
				this.activeCateInd = this.activeCateInd
			})
		},
		initRefresh() {
			this.param.page = 1
			this.initIndex(true)
		},
		toSearch(val) {
			this.param.page = 1
			this.param.title = val
			this.getList()
		},
		async getList() {
			let {
				list: oldList,
				param
			} = this
			let {
				id
			} = this.options
			param.cate_id = id || 0
			console.log(this.options, 'param', param)
			let newList = await this.$api.service.serviceList(param);

			if (this.param.page == 1) {
				this.list = newList
			} else {
				newList.data = oldList.data.concat(newList.data)
				this.list = newList
			}
			this.loading = false
			this.$util.hideAll()
		},
		chooseCate(index) {
			this.activeCateInd = index

			this.options.id = this.service_cate.list[index].ind || 0
			this.param.page = 1
			console.log(this.service_cate.list, 'service_cate', this.options.id)
			this.getList()
		}
	}
}
</script>


<style lang="scss" scoped>
.space-lg {
	background: url("https://qiniu.htknow.com/17978_183e82be3d9b18aa6852ff500f95ea8e.png?imageslim");
	width: 100%;
	height: 500rpx;
	background-size: 100% 100%;
	position: relative;
}

.content {
	position: relative;
	margin-top: -232rpx;
}

.cate-wrap {
	display: flex;
	flex-wrap: wrap;
	row-gap: 20rpx;  
	padding: 20rpx 20rpx 0;

	.cate-item {
		flex: 0 0 25%;
		/* 每行 4 个 */
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 60rpx;
		font-size: 30rpx;
		color: #9D9D9D;
		border-radius: 8rpx;
		// margin-bottom: 20rpx;
		/* 行间距，可按需调整 */

		&.active {
			background: #02C8A5;
			color: #fff !important;
			font-weight: bold;
		}
	}
}

.cate-scroll {
	white-space: nowrap;
	/* 关键：不换行 */
	padding: 20rpx 0 20rpx;

	.cate-item {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		height: 60rpx;
		padding: 0 32rpx;
		margin-left: 40rpx;
		font-size: 30rpx;
		border-radius: 30rpx;
		color: #9D9D9D;
		// background: #f5f5f5; 
		border-radius: 8rpx;

		&.active {
			background: #02C8A5;
			color: #fff !important;
			font-weight: bold;
		}

		&:last-child {
			margin-right: 20rpx;
			/* 尾部留空，滑动更舒服 */
		}

		&:first-child {
			margin-left: 20rpx !important;
			/* 尾部留空，滑动更舒服 */
		}
	}
}
</style>